<template>
	<view class="container">
		<!-- 添加餐品按钮 -->
		<button class="action-button" @click="showAddFoodModal">添加餐品</button>
		<!-- 餐品表格 -->
		<view class="table">
			<view class="table-header">
				<view>名称</view>
				<view>图片</view>
				<view>单价</view>
				<view>类别</view>
				<view>操作</view>
			</view>
			<view class="table-body">
				<view v-for="(food, index) in foodList" :key="food.itemId" class="table-row">
					<view>{{ food.name }}</view>
					<view>
						<image :src="food.imageUrl" mode="aspectFit" style="width: 50px; height: 50px;"></image>
					</view>
					<view>¥{{ food.price }}</view>
					<view>{{ food.category }}</view>
					<view style="display: flex; flex-direction:column">
						<button class="edit-button" @click="showEditFoodModal(index)">修改</button>
						<button class="delete-button" @click="deleteFood(index , food.itemId)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加餐品弹窗 -->
		<view v-if="isAddFoodModalVisible" class="modal">
			<view class="modal-content">
				<view class="modal-title">添加餐品</view>
				<input v-model="newFood.name" placeholder="请输入餐品名称" class="input-field" />
				<UploadImage @imageUploaded="handleImageAdd" />
				<input v-model="newFood.price" type="number" placeholder="请输入单价" class="input-field" />
				<input v-model="newFood.category" placeholder="请输入餐品类别" class="input-field" />
				<view class="modal-buttons">
					<button class="cancel-button" @click="hideAddFoodModal">取消</button>
					<button class="confirm-button" @click="confirmAddFood">确认添加</button>
				</view>
			</view>
		</view>

		<!-- 修改餐品弹窗 -->
		<view v-if="isEditFoodModalVisible" class="modal">
			<view class="modal-content">
				<view class="modal-title">修改餐品信息</view>
				<input v-model="editedFood.name" placeholder="请输入餐品名称" class="input-field" />
				<UploadImage @imageUploaded="handleImageUploaded" />
				<input v-model="editedFood.price" type="number" placeholder="请输入单价" class="input-field" />
				<input v-model="editedFood.category" placeholder="请输入餐品类别" class="input-field" />
				<view class="modal-buttons">
					<button class="cancel-button" @click="hideEditFoodModal">取消</button>
					<button class="confirm-button" @click="confirmEditFood">确认修改</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		UploadImage
	} from '../../components/UploadImage'
	import {
		adminRestaurantItems,
		editAdminRestaurantItem,
		addAdminRestaurantItem,
		deleteAdminRestaurantItem
	} from '../../request/api.js'
	import {
		useUserStore
	} from '../../stores/user.js'

	// 餐品列表
	const foodList = ref([]);

	// 添加餐品弹窗显示状态
	const isAddFoodModalVisible = ref(false);
	// 新增餐品数据
	const newFood = ref({
		name: '',
		imageUrl: '',
		price: '',
		category: ''
	});

	// 修改餐品弹窗显示状态
	const isEditFoodModalVisible = ref(false);
	// 编辑的餐品索引
	const editedFoodIndex = ref(-1);
	// 编辑的餐品数据
	const editedFood = ref({
		itemId: '',
		name: '',
		imageUrl: '',
		price: '',
		category: ''
	});

	// 显示添加餐品弹窗
	const showAddFoodModal = () => {
		isAddFoodModalVisible.value = true;
	};

	// 隐藏添加餐品弹窗
	const hideAddFoodModal = () => {
		isAddFoodModalVisible.value = false;
		newFood.value = {
			name: '',
			imageUrl: '',
			price: '',
			category: ''
		};
	};

	// 确认添加餐品
	const confirmAddFood = async () => {
		if (!validateForm(newFood.value)) return;

		try {
			const restaurantId = useUserStore().student_id
			const res = await addAdminRestaurantItem({
				...newFood.value,
				price: Number(newFood.value.price)
			}, restaurantId);

			foodList.value.unshift({
				...newFood.value,
				itemId: res.itemId
			});
			hideAddFoodModal();
			uni.showToast({
				title: '添加成功',
				icon: 'success'
			});
		} catch (error) {
			uni.showToast({
				title: '添加失败',
				icon: 'none'
			});
		}
	};

	// 显示修改餐品弹窗
	const showEditFoodModal = (index) => {
		isEditFoodModalVisible.value = true;
		editedFoodIndex.value = index;
		const food = foodList.value[index];
		editedFood.value = {
			...food
		};
	};

	// 隐藏修改餐品弹窗
	const hideEditFoodModal = () => {
		isEditFoodModalVisible.value = false;
		editedFood.value = {
			itemId: '',
			name: '',
			imageUrl: '',
			price: '',
			category: ''
		};
	};

	// 确认修改餐品
	const confirmEditFood = async () => {
		if (!validateForm(editedFood.value)) return;

		try {
			const restaurantId = useUserStore().student_id
			await editAdminRestaurantItem({
				...editedFood.value,
				price: Number(editedFood.value.price)
			}, restaurantId);

			foodList.value[editedFoodIndex.value] = {
				...editedFood.value
			};
			hideEditFoodModal();
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
		} catch (error) {
			uni.showToast({
				title: '修改失败',
				icon: 'none'
			});
		}
	};

	// 删除餐品
	const deleteFood = (index, itemId) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除该餐品吗？',
			success: async (res) => {
				if (res.confirm) {
					try {
						await deleteAdminRestaurantItem(itemId);
						foodList.value.splice(index, 1);
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					} catch (error) {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						});
					}
				}
			}
		});
	};

	// 表单验证
	const validateForm = (formData) => {
		if (!formData.name.trim()) {
			uni.showToast({
				title: '请填写餐品名称',
				icon: 'none'
			});
			return false;
		}
		if (!formData.imageUrl) {
			uni.showToast({
				title: '请上传餐品图片',
				icon: 'none'
			});
			return false;
		}
		if (!formData.price || Number(formData.price) <= 0) {
			uni.showToast({
				title: '请输入有效单价',
				icon: 'none'
			});
			return false;
		}
		if (!formData.category.trim()) {
			uni.showToast({
				title: '请填写餐品类别',
				icon: 'none'
			});
			return false;
		}
		return true;
	};

	// 图片上传处理
	const handleImageUploaded = (url) => {
		editedFood.value.imageUrl = url;
	};

	const handleImageAdd = (url) => {
		newFood.value.imageUrl = url;
	}

	// 初始化数据
	const init = async () => {
		try {
			const restaurantId = useUserStore().student_id
			const res = await adminRestaurantItems(restaurantId);
			foodList.value = res.items.map(item => ({
				...item,
				price: Number(item.price).toFixed(2)
			}));
		} catch (error) {
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		}
	}

	init();
</script>

<style scoped>
	/* 容器整体样式 */
	.container {
		padding: 32rpx;
		background: #f8fafc;
		min-height: 100vh;
	}

	/* 标题样式 */
	.title {
		font-size: 44rpx;
		font-weight: 600;
		color: #1e293b;
		text-align: center;
		margin: 48rpx 0;
		position: relative;
		padding-bottom: 24rpx;
	}

	.title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 4rpx;
		background: #3b82f6;
	}

	/* 操作按钮样式 */
	.action-button {
		background: linear-gradient(135deg, #3b82f6, #6366f1);
		color: white;
		margin: 24rpx;
		padding: 20rpx 40rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.2);
		transition: all 0.2s ease;
	}

	.action-button:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
	}

	/* 表格样式 */
	.table {
		background: white;
		border-radius: 16rpx;
		margin: 32rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.table-header {
		display: flex;
		padding: 32rpx 24rpx;
		background: #f1f5f9;
		font-weight: 500;
		color: #64748b;
	}

	.table-header>view {
		flex: 1;
		text-align: center;
		padding: 16rpx;
		font-size: 30rpx;
	}

	/* 表格行样式 */
	.table-row {
		display: flex;
		align-items: center;
		padding: 28rpx 24rpx;
		border-bottom: 1rpx solid #f1f5f9;
		transition: background 0.2s ease;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-row:hover {
		background: #f8fafc;
	}

	.table-row>view {
		flex: 1;
		text-align: center;
		padding: 16rpx;
		color: #475569;
		font-size: 28rpx;
	}

	/* 图片容器 */
	.table-row image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		object-fit: cover;
		margin: 0 auto;
	}

	/* 操作按钮组 */
	/* 操作按钮组 */
	.table-row>view:last-child {
		display: flex;
		gap: 16rpx;
		/* 控制按钮间距 */
		justify-content: center;
		align-items: center;
	}

	.edit-button,
	.delete-button {
		flex-shrink: 0;
		padding: 12rpx 24rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
		line-height: 1.5;
		white-space: nowrap;
		transition: all 0.2s ease;
	}

	.edit-button {
		background: linear-gradient(135deg, #10b981, #059669);
		color: white;
	}

	.delete-button {
		background: linear-gradient(135deg, #ef4444, #dc2626);
		color: white;
	}

	/* 响应式优化 */
	@media (max-width: 480px) {

		.edit-button,
		.delete-button {
			padding: 8rpx 16rpx;
			font-size: 24rpx;
		}
	}

	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(6rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background: white;
		width: 86%;
		max-width: 640rpx;
		padding: 48rpx;
		border-radius: 24rpx;
		box-shadow: 0 24rpx 48rpx rgba(0, 0, 0, 0.12);
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1e293b;
		text-align: center;
		margin-bottom: 40rpx;
		position: relative;
	}

	/* 输入框样式 */
	.input-field {
		width: 100%;
		padding: 24rpx;
		margin-bottom: 32rpx;
		border: 2rpx solid #e2e8f0;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #475569;
		transition: all 0.2s ease;
	}

	.input-field:focus {
		border-color: #3b82f6;
		box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.1);
	}

	/* 按钮容器 */
	.modal-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 48rpx;
	}

	.cancel-button {
		background: #f1f5f9;
		color: #64748b;
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		transition: all 0.2s ease;
	}

	.confirm-button {
		background: linear-gradient(135deg, #3b82f6, #6366f1);
		color: white;
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		transition: all 0.2s ease;
	}

	.cancel-button:active,
	.confirm-button:active {
		transform: scale(0.98);
	}

	/* 价格显示样式 */
	.price-display {
		color: #3b82f6;
		font-weight: 500;
	}

	/* 响应式优化 */
	@media (max-width: 480px) {

		.table-header>view,
		.table-row>view {
			font-size: 26rpx;
		}

		.edit-button,
		.delete-button {
			padding: 10rpx 24rpx;
			font-size: 24rpx;
		}
	}
</style>